<template>
  <!-- 校友卡申请页 -->
  <div class="application">
    <div class="form_box">
      <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
      <u--form
        labelPosition="left"
        :model="model1"
        ref="form1"
      >
        <div
          class="modele1"
          style="background: white; width: 100%; padding: 0px 10px"
        >
          <!-- 校友信息 -->
          <div class="cell1">
            <u--image
              :showLoading="true"
              :src="src"
              width="15px"
              height="22px"
            ></u--image>
            <u--text text="校友信息"></u--text>
          </div>
          <!-- 姓名 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '90px' }">
                姓名 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.name"
              border="none"
              placeholder="请输入姓名"
              disabled
            ></u--input>
          </u-form-item>
          <!-- 入校年份 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '90px' }">
                入校年份 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.entrance"
              border="none"
              placeholder="请输入入校年份"
              disabled
            ></u--input>
          </u-form-item>
          <!-- 入校班级 -->
          <u-form-item
            borderBottom
            ref="item1"
          >
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '90px' }">
                入校班级 ：
              </div>
            </template>
            <u--input
              v-model="model1.userInfo.class"
              border="none"
              placeholder="请输入入校班级"
              disabled
            ></u--input>
          </u-form-item>
        </div>
        <div
          class="modele1"
          style="
            background: white;
            width: 100%;
            padding: 0px 10px;
            margin-top: 10px;
          "
        >
          <!-- 照片采集 -->
          <div class="cell1">
            <u--image
              :showLoading="true"
              :src="src"
              width="15px"
              height="22px"
            ></u--image>
            <u--text text="照片采集"></u--text>
          </div>
          <!-- 照片采集 -->
          <u-form-item
            label="请上传1寸白底背景电子版证件照 "
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100%"
            :leftIconStyle="{ color: 'red' }"
          >
          </u-form-item>
          <div
            class=""
            style="padding:15px 0px 20px 30px"
          >
            <u-upload
              :fileList="fileList1"
              @afterRead="afterRead"
              @delete="deletePic"
              name="1"
              multiple
              :maxCount="1"
              deletable
            ></u-upload>
          </div>

        </div>
      </u--form>
    </div>
    <!-- 按钮区 -->
    <div class="btn_box">
      <button
        class="btn"
        type="primary"
        @click="formSubmit"
      >提交</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: require("@/static/index/shuxian.png"),
      //照片采集
      fileList1: [
        // { url: 'https://cdn.uviewui.com/uview/swiper/1.jpg', }
      ],
      model1: {
        userInfo: {
          name: "王芳", //姓名
          entrance: "1983年", //入校年份
          class: "初23班、高148班", //入校班级
        },
      },

      rules: {
        //表单校验
        "userInfo.name": {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },

      },
    };
  },
  methods: {
    //照片采集
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          formData: {
            user: 'test'
          },
          success: (res) => {
            setTimeout(() => {
              resolve(res.data.data)
            }, 1000)
          }
        });
      })
    },
    //表单提交
    formSubmit() {
      console.log(this.fileList1[0]);
      if (this.fileList1.length == 0) {
        uni.$u.toast("请完成照片采集！");
      } else {

        uni.showToast({
          title: "提交成功！",
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.reLaunch({
                url: `/pages/alumniCard/alumniCard`,
              });
            }, 600);
          },
        });

      }
    },
  },
};
</script>
<style lang="scss" scoped>
.application {
  // 表单
  .form_box {
    box-sizing: border-box;
    background: #eef2fb;
    .cell1 {
      padding: 10px 0px;
      display: flex;
      border-bottom: 1px solid #e8e9ea;
      box-sizing: border-box;
    }
    .cell_join {
      padding: 10px 0;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding-right: 15px;
      align-items: center;
    }
  }
  // 按钮区
  .btn_box {
    padding: 10px;
    box-sizing: border-box;
    margin-top: 50px;

    .btn {
      background: #1990ff;
      color: white;
      border-radius: 10px;
    }
  }
}
</style>